<template>
  <div class="page flex-col">
      <div class="box_ma1 flex-col">
      <div class="image-wrapper_ma1 flex-col">
        <img class="image_ma1" referrerpolicy="no-referrer"
          src="https://lanhu-oss.lanhuapp.com/fc0f2022b50d20024bde438301586c22" />
      </div>
    </div>
    <div class="box_ma2 flex-col">
      <div class="image-wrapper_ma2 flex-row justify-between">
        <img class="image_ma2" referrerpolicy="no-referrer"
          src="https://lanhu-oss.lanhuapp.com/4ded41414ff95c3af2bc6b516f4e2e90" />
        <img class="image_ma3" referrerpolicy="no-referrer"
          src="https://lanhu-oss.lanhuapp.com/8fbc6072d5b5b7eb85b505e3943d4c69" />
      </div>
      <div class="section_ma1 flex-row justify-between">
        <div class="block_ma1 flex-col">
          <span class="text_ma1">首页</span>
          <div class="text-wrapper_ma1 flex-col">
            <span class="text_ma2">公告资讯</span>
          </div>
        </div>
        <div class="block_ma2 flex-col justify-between">
          <img class="image_ma4" referrerpolicy="no-referrer"
            src="https://lanhu-oss.lanhuapp.com/c16b2b9d25cef9fc95b7620654338799" />
          <span class="text_ma3">进入课堂</span>
        </div>
      </div>
      <img class="image_ma5" referrerpolicy="no-referrer"
        src="https://lanhu-oss.lanhuapp.com/a5d0e53d4cb98eb07a6670dde85506bf" />
      <img class="image_ma14" referrerpolicy="no-referrer"
        src="https://lanhu-oss.lanhuapp.com/a2469af889cdb132c41c7016cdb81d9e" />
      <div class="section_ma2 flex-col">
        <div class="block_ma3 flex-row justify-end">
          <div class="text-wrapper_ma2 flex-col">
            <span class="text_ma4">登录/注册</span>
          </div>
        </div>
        <div class="image-wrapper_ma3 flex-row">
          <img class="image_ma7" referrerpolicy="no-referrer"
            src="https://lanhu-oss.lanhuapp.com/5070974f6ded4c961e5203de222b4836" />
          <img class="image_ma8" referrerpolicy="no-referrer"
            src="https://lanhu-oss.lanhuapp.com/8eb0c207f07d76c86a25b3e0af7584f4" />
          <img class="image_ma9" referrerpolicy="no-referrer"
            src="https://lanhu-oss.lanhuapp.com/a0a378b6fc03028f4aec550321019ec8" />
          <img class="image_ma10" referrerpolicy="no-referrer"
            src="https://lanhu-oss.lanhuapp.com/db1cdf64cecf28c0b154913909c8e6be" />
        </div>
        <div class="block_ma4 flex-row" style="justify-content: center;">
          <span class="text_ma5">自治区线上培训AI课堂</span>
        </div>
        <div class="block_ma5 flex-col">
          <div class="image-wrapper_ma4 flex-row">
            <img class="label_ma1" referrerpolicy="no-referrer"
              src="https://lanhu-oss.lanhuapp.com/ab44a192f8a0737a78c21e3cc43085a3" />
          </div>
          <div class="group_ma1 flex-row justify-between" @click="jumpToThree">
            <img class="image_ma13" referrerpolicy="no-referrer"
              src="https://lanhu-oss.lanhuapp.com/24210b3eb43ae64c25d3d750f1d74067" />
            <div class="block_ma6 flex-col">
              <div class="image-wrapper_ma5 flex-row">
                <img class="thumbnail_1" referrerpolicy="no-referrer"
                  src="https://lanhu-oss.lanhuapp.com/589f88a46877ef85251f645e6fd09e67" />
              </div>
              <div class="text-wrapper_ma3 flex-row">
                <span class="text_ma6">想问什么尽管戳我</span>
              </div>
              <div class="image-wrapper_ma6 flex-row">
                <img class="label_ma2" referrerpolicy="no-referrer"
                  src="https://lanhu-oss.lanhuapp.com/e6674943baefc2f48ae628ae390a4f63" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="section_ma3 flex-col">
        <span class="text_ma7">证书查询</span>
        <div class="text-wrapper_ma4 flex-col">
          <span class="text_ma8">帮助中心</span>
        </div>
      </div>
      <div class="text-wrapper_ma5 flex-col">
        <span class="text_ma9">个人中心</span>
      </div>
      <div class="image-wrapper_ma7 flex-col" @click="jumpToThree">
        <img class="label_ma3" referrerpolicy="no-referrer"
          src="https://lanhu-oss.lanhuapp.com/b00ff0347bd21fe91899475f39bca78a" />
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import debounce from 'lodash/debounce';
export default {
  name: 'App',
  components: {

  },
  data() {
    return {
      username: "",
      password: "",
    }
  },
  methods: {
    jumpToThree() {
      this.$router.push('/anthree');
    }
  },
  created() {
    console.group('创建实例之后');
    console.log('执行完毕这个钩子函数, 才会去捕获页面上的内容, 准备渲染页面');
  },
  mounted() {
    //修复加载的旋转圆圈位置下移
    console.log('mounted==>>')

  },
  watch: {
    $route(to, from) {

    }
  }
}
</script>

<style>
@import './common.css';

.page {
  position: relative;
  width: 100%;
  height: 56.25vw;
  overflow: hidden;
}

span {
  caret-color: transparent;
}

.box_ma1 {
  height: 56.25vw;
  background: url(https://lanhu-oss.lanhuapp.com/e8956d9750506dc4a36d838d3cfc352c) 100% no-repeat;
  background-size: 100% 100%;
  width: 100%;
}

.image-wrapper_ma1 {
  height: 20.99vw;
  background: url(https://lanhu-oss.lanhuapp.com/06a8c40d5343fb2326ed1b3e32f1023e) 100% no-repeat;
  background-size: 100% 100%;
  margin-top: 35.27vw;
  width: 100%;
}

.image_ma1 {
  width: 100%;
  height: 15.89vw;
  margin-top: 5.11vw;
}

.box_ma2 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 46.78vw;
  background: url(https://lanhu-oss.lanhuapp.com/e11d73931d5b2328e1cd8c91d07bbf46) 100% no-repeat;
  background-size: 100% 100%;
}

.image-wrapper_ma2 {
  width: 99.33vw;
  height: 5.94vw;
  margin: 16.19vw 0 0 0.31vw;
}

.image_ma2 {
  width: 5.42vw;
  height: 5.94vw;
}

.image_ma3 {
  width: 5.42vw;
  height: 5.94vw;
}

.section_ma1 {
  width: 74.85vw;
  height: 9.02vw;
  margin: 21.77vw 0 6.14vw 20.36vw;
}

.block_ma1 {
  height: 4.38vw;
  background: url(https://lanhu-oss.lanhuapp.com/2609d7a929a236c5edad0fe473ca6e10) 0vw -0.11vw no-repeat;
  background-size: 13.22vw 4.47vw;
  margin-top: 4.64vw;
  width: 13.23vw;
  position: relative;
}

.text_ma1 {
  width: 3.03vw;
  height: 1.46vw;
  overflow-wrap: break-word;
  color: rgba(215, 244, 255, 1);
  font-size: 1.56vw;
  font-family: SourceHanSansCN-Medium;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  line-height: 1.1vw;
  margin: 1.25vw 0 0 5.1vw;
}

.text-wrapper_ma1 {
  height: 4.38vw;
  background: url(https://lanhu-oss.lanhuapp.com/3f7f6ed33a9160fd74d850a374d4c8fb) 0vw -0.11vw no-repeat;
  background-size: 13.22vw 4.47vw;
  width: 13.23vw;
  position: absolute;
  left: 11.46vw;
  top: 0;
}

.text_ma2 {
  width: 6.25vw;
  height: 1.46vw;
  overflow-wrap: break-word;
  color: rgba(215, 244, 255, 1);
  font-size: 1.56vw;
  font-family: SourceHanSansCN-Medium;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  line-height: 1.1vw;
  margin: 1.25vw 0 0 3.48vw;
}

.block_ma2 {
  width: 6.15vw;
  height: 8.49vw;
}

.image_ma4 {
  width: 5.37vw;
  height: 5.37vw;
  margin-left: 0.42vw;
}

.text_ma3 {
  width: 6.15vw;
  height: 1.46vw;
  overflow-wrap: break-word;
  color: rgba(215, 244, 255, 1);
  font-size: 1.56vw;
  font-family: SourceHanSansCN-Medium;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  line-height: 0.89vw;
  margin-top: 1.67vw;
}

.image_ma5 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 17.04vw;
}

.section_ma2 {
  position: absolute;
  left: 3.23vw;
  top: 0.06vw;
  width: 93.75vw;
  height: 35.06vw;
  background: url(https://lanhu-oss.lanhuapp.com/0b15035ce07c6a7943bd27f1bf1e6a79) 100% no-repeat;
  background-size: 100% 100%;
}

.block_ma3 {
  width: 57.92vw;
  height: 3.75vw;
  margin: 4.84vw 0 0 34.37vw;
}

.image_ma6 {
  width: 24.74vw;
  height: 1.2vw;
  margin-top: 0.84vw;
}

.text-wrapper_ma2 {
  border-radius: 15px;
  height: 3.75vw;
  border: 2px solid rgba(27, 225, 255, 1);
  width: 10.63vw;
}

.text_ma4 {
  width: 6.83vw;
  height: 1.46vw;
  overflow-wrap: break-word;
  color: rgba(215, 244, 255, 1);
  font-size: 1.56vw;
  font-family: AlibabaPuHuiTiM;
  font-weight: normal;
  text-align: center;
  white-space: nowrap;
  line-height: 1.57vw;
  margin: 1.14vw 0 0 1.92vw;
}

.image-wrapper_ma3 {
  width: 87.92vw;
  height: 15.16vw;
  margin: 2.91vw 0 8.38vw 2.81vw;
}

.image_ma7 {
  width: 23.65vw;
  height: 14.17vw;
  margin-top: 0.53vw;
}

.image_ma8 {
  width: 18.03vw;
  height: 12.14vw;
  margin: 1.51vw 0 0 1.25vw;
}

.image_ma9 {
  width: 18.49vw;
  height: 12.35vw;
  margin: 1.4vw 0 0 1.45vw;
}

.image_ma10 {
  width: 23.81vw;
  height: 15.16vw;
  margin-left: 1.25vw;
}

.block_ma4 {
  position: absolute;
  left: -2.34vw;
  top: -0.05vw;
  width: 98.13vw;
  height: 6.46vw;
  background: url(https://lanhu-oss.lanhuapp.com/b8e6083923dcbb70e0970b7addd5da8d) -0.06vw 0vw no-repeat;
  background-size: 98.17vw 6.45vw;
}

.image_ma11 {
  width: 10.99vw;
  height: 3.08vw;
  margin: 0.57vw 0 0 1.82vw;
}

.text_ma5 {
  text-shadow: 0px 4px 0px rgba(0, 142, 163, 0.7);
  background-image: linear-gradient(180deg,
      rgba(255, 255, 255, 1) 0,
      rgba(255, 255, 255, 1) 49.682617%,
      rgba(27, 225, 255, 1) 99.682617%,
      rgba(27, 225, 255, 1) 100%);
  width: 31.15vw;
  height: 2.97vw;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 3.12vw;
  font-family: AlibabaPuHuiTiB;
  font-weight: normal;
  text-align: center;
  white-space: nowrap;
  line-height: 2.82vw;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 1.35vw;
}

.image_ma12 {
  width: 14.54vw;
  height: 3.49vw;
  margin: 1.19vw 3.07vw 0 15.98vw;
}

.block_ma5 {
  height: 24.07vw;
  background: url(https://lanhu-oss.lanhuapp.com/c94220c86267b2ce35e3f4c1dc4d1582) 100% no-repeat;
  background-size: 100% 100%;
  width: 46.31vw;
  position: absolute;
  left: 23.29vw;
  top: 24.43vw;
}

.image-wrapper_ma4 {
  width: 1.31vw;
  height: 1.2vw;
  margin: 2.65vw 0 0 44.58vw;
}

.label_ma1 {
  width: 1.31vw;
  height: 1.2vw;
}

.group_ma1 {
  cursor: pointer;
  width: 28.18vw;
  height: 16.25vw;
  margin: 0.31vw 0 3.64vw 16.56vw;
}

.image_ma13 {
  width: 13.7vw;
  height: 15.32vw;
  margin-top: 0.94vw;
}

.block_ma6 {
  height: 5.73vw;
  background: url(https://lanhu-oss.lanhuapp.com/f6dc4fd65d414f1c7143040490ea1c12) -0.63vw -0.58vw no-repeat;
  background-size: 15.15vw 6.97vw;
  width: 13.91vw;
}

.image-wrapper_ma5 {
  width: 0.63vw;
  height: 0.68vw;
}

.thumbnail_1 {
  width: 0.63vw;
  height: 0.68vw;
}

.text-wrapper_ma3 {
  width: 11.05vw;
  height: 1.36vw;
  margin: 0.88vw 0 0 1.4vw;
}

.text_ma6 {
  width: 11.05vw;
  height: 1.36vw;
  overflow-wrap: break-word;
  color: rgba(215, 244, 255, 1);
  font-size: 1.35vw;
  font-family: SourceHanSansCN-Medium;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  line-height: 1.88vw;
}

.image-wrapper_ma6 {
  width: 1.46vw;
  height: 1.41vw;
  margin: 1.35vw 0 0.05vw 2.81vw;
}

.label_ma2 {
  width: 1.46vw;
  height: 1.41vw;
}

.image_ma14 {
  position: absolute;
  left: 0;
  top: 40.63vw;
  width: 100%;
  height: 4.22vw;
}

.section_ma3 {
  height: 4.38vw;
  background: url(https://lanhu-oss.lanhuapp.com/c02b8c9c1e1e02387efa9155db4346d4) 0vw -0.11vw no-repeat;
  background-size: 13.48vw 4.47vw;
  width: 13.49vw;
  position: absolute;
  left: 43.29vw;
  top: 48.49vw;
}

.text_ma7 {
  width: 6.2vw;
  height: 1.46vw;
  overflow-wrap: break-word;
  color: rgba(215, 244, 255, 1);
  font-size: 1.56vw;
  font-family: SourceHanSansCN-Medium;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  line-height: 1.1vw;
  margin: 1.25vw 0 0 3.64vw;
}

.text-wrapper_ma4 {
  height: 4.38vw;
  background: url(https://lanhu-oss.lanhuapp.com/b3fefb6d0208bd470392277a9c0b58bd) 0vw -0.11vw no-repeat;
  background-size: 13.22vw 4.47vw;
  width: 13.23vw;
  position: absolute;
  left: 11.72vw;
  top: 0.06vw;
}

.text_ma8 {
  width: 6.25vw;
  height: 1.46vw;
  overflow-wrap: break-word;
  color: rgba(215, 244, 255, 1);
  font-size: 1.56vw;
  font-family: SourceHanSansCN-Medium;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  line-height: 1.1vw;
  margin: 1.25vw 0 0 3.48vw;
}

.text-wrapper_ma5 {
  height: 4.38vw;
  background: url(https://lanhu-oss.lanhuapp.com/e7ee5a75a03ddfb6453a144128c4ffa8) 0vw -0.11vw no-repeat;
  background-size: 13.28vw 4.47vw;
  width: 13.29vw;
  position: absolute;
  left: 66.41vw;
  top: 48.55vw;
}

.text_ma9 {
  width: 6.31vw;
  height: 1.46vw;
  overflow-wrap: break-word;
  color: rgba(215, 244, 255, 1);
  font-size: 1.56vw;
  font-family: SourceHanSansCN-Medium;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  line-height: 1.1vw;
  margin: 1.25vw 0 0 3.48vw;
}

.image-wrapper_ma7 {
  cursor: pointer;
  height: 6.72vw;
  background: url(https://lanhu-oss.lanhuapp.com/dc8f48d284a3da249ff5a8a4cfe44bf1) 100% no-repeat;
  background-size: 100% 100%;
  width: 6.72vw;
  position: absolute;
  left: 88.81vw;
  top: 43.23vw;
}

.label_ma3 {
  width: 2.56vw;
  height: 2.5vw;
  margin: 2.13vw 0 0 2.08vw;
}

</style>